{extend name="mainadmin@layouts/base" /}
{block name="main" }
<header class="header  b-b clearfix">
  {if condition="$count<10"}
  <button class="btn btn-sm btn-default  m-t-md m-l" id="btn_add"><i
          class="fa fa-plus m-r-xs"></i>添加</button>
  {/if}
</header>

<section class="scrollable wrapper w-f ">
  <section class="panel panel-default ">
    <div class="table-responsive " id="list_box">
      <table class="table table-bordered  table-hover">
        <thead class="flip-content bordered-palegreen">
        <tr>
          <th style="text-align: center" width="120">序号</th>
          <th style="text-align: center">标签</th>
          <th style="text-align: center" width="150">操作</th>
        </tr>
        </thead>
        <tbody>
        {volist name="data" id="vo" key="index"}
        <tr>
          <td align="center">{$index}</td>
          <td align="center">{$vo.label}</td>
          <td align="center">
            <a href="#" onclick="edit_label({$vo['id']},'{$vo[\'label\']}')"  title="编辑" class="fa fa-edit m-xs" ></a>
            <a href="{:url('del',array('label_id'=>$vo['id']))}"   class="fa fa-trash"  title="删除"></a>
          </td>
        </tr>
        {/volist}
        </tbody>
      </table>
      {empty name="data"}
      <table width="100%" >
        <tr><td height="300" colspan="8" align="center" valign="middle" >没有相关数据！</td></tr>
      </table>
      {/empty}
      <input type="hidden" id="count_data" value="{$count}">
      <input type="hidden" id="list_data" value="1">
    </div>
  </section>
</section>
<script src="__STATIC__/js/jquery/jquery/2.1.4/jquery.min.js"></script>


<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" style="text-align: center" id="myModalLabel">添加标签</h4>
      </div>
      <div class="modal-body" id="label_list">

        <div class="form-group">
          <input type="text" name="label1" id="label1" class="form-control" style="width: 90%;float: left" placeholder="标签名称">
          {if condition="$count<9"}
          <div onclick="add_label()" id="add_label1" style="float: right;font-size: 25px;text-align: center;width: 10%;height: 28px;line-height: 28px;">+</div>
          {/if}
        </div>
      </div>
      <div class="modal-footer" style="text-align: center">
        <button type="button" id="btn_submit" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" style="text-align: center" id="myModalLabel1">编辑标签</h4>
      </div>
      <div class="modal-body">

        <div class="form-group">
          <input type="text" name="label1" id="exitlabel" class="form-control" placeholder="标签名称">
          <input type="hidden" id="exitlabel_id" value="">
        </div>
      </div>
      <div class="modal-footer" style="text-align: center">
        <button type="button" id="btn_exit_submit" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
<script>

  $("#btn_add").click(function () {
    $("#myModalLabel").text("添加标签");
    $("#label_text").empty();
    $('#myModal').modal();
  });

  // 添加
  function add_label() {
    var str = "";
    var list_num = $('#label_list').children('.form-group').length;
    $("#list_data").val(list_num+1);
    var count_data = $("#count_data").val();
    $("#add_label"+list_num).hide();
    str+='<div class="form-group"><input type="text" name="label'+(list_num+1)+'"  id="label'+(list_num+1)+'" class="form-control" style="width: 90%;float: left" placeholder="标签名称">';
    if (list_num+1+parseInt(count_data)<10) {
      str += '<div onclick="add_label()" style="float: right;font-size: 25px;text-align: center;width: 10%;height: 28px;line-height: 28px;" id="add_label' + (list_num + 1) + '">+</div>';
    }
    str+='</div>';
    $("#label_list").append(str);
  }

  // 编辑
  function edit_label(id,label) {
    $("#exitlabel").val(label);
    $("#exitlabel_id").val(id);
    $("#myModalLabel1").text("编辑标签");
    $('#myModal1').modal();
  }

  // 编辑提交
  $("#btn_exit_submit").click(function (){
    var label = $("#exitlabel").val();
    var id = $("#exitlabel_id").val();
    var arr = new Object();
    arr.id=id;
    arr.label=label;
    var res = jq_ajax('{:url("ajaxEdit")}', arr);
    if(res.code==0){
      return false;
    }
    window.location.reload();

    // window.location.reload();
  });

  // 添加提交
  $("#btn_submit").click(function () {
    var data_list = $("#list_data").val();
    console.log(data_list)
    data_list = parseInt(data_list);
    var list = [];
    for (var i=1;i<=data_list;i++) {
      list[i-1] = $("#label"+i).val();
      if (list[i-1]==""||list[i-1]==undefined||list[i-1]==null) {
        alert('请先输入标签');
        return false;
        break;
      }
    }
    var arr = new Object();
    arr.list = list;
    var res = jq_ajax('{:url("ajaxAdd")}', arr);
    if(res.code==0){
      return false;
    }
    window.location.reload();
  });
</script>
{/block}
